<template>
  <BasicModal v-bind="$attrs" @register="register" title="请选择状态" @ok="handleSuccess">
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { schemas, checkStatusList } from './statusModal.data';
  import { getFlowSetMyActionStatus } from '/@/api/flowManage/flowManage';
  export default defineComponent({
    components: { BasicModal, BasicForm },
    emits: ['success'],
    setup(_, { emit }) {
      const modelRef = ref<Recordable>({});
      const [
        registerForm,
        {
          resetFields,
          validate,
          setFieldsValue,
          // setProps
        },
      ] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      const [register, { closeModal }] = useModalInner((data) => {
        data && fetch(data);
      });

      async function fetch(data) {
        modelRef.value = data?.record;
        await nextTick();
        resetFields();
        setFieldsValue({
          checkStatus: unref(modelRef).checkStatus,
        });
      }

      const handleSuccess = async () => {
        try {
          const values = await validate();
          let formata = Object.assign({}, values);
          formata.myActionId = unref(modelRef).id;
          await getFlowSetMyActionStatus(formata);
          const obj = checkStatusList.find((item) => item.value == formata.checkStatus);
          closeModal();
          emit('success', obj);
        } catch (err) {
          console.log(err);
        } finally {
        }
      };
      return { register, schemas, registerForm, model: modelRef, handleSuccess };
    },
  });
</script>
